@rem: 50rem;
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f4f4f4;
}

.item {
  width: 100%;
  height: 190/@rem;
  margin-bottom: 10/@rem;

  //.is-enable {
  //  color: white;
  //  width: 150/@rem;
  //  height: 170/@rem;
  //  float: right;
  //  font-size: 32/@rem;
  //  text-align: center;
  //  line-height: 170/@rem;
  //  //box-shadow: none;
  //  //border: 0;
  //}
  //
  //.enable {
  //  background-color: #e6e6e6;
  //}
  //
  //.disable {
  //  background-color: #45aef0;
  //}

  .left-box {
    height: 180/@rem;
    width: 450/@rem;
    float: left;

    .name {
      font-size: 34/@rem;
      margin-top: 30/@rem;
      color: #333333;
      margin-bottom: 15/@rem;
      margin-left: 30/@rem;
    }

    .tel {
      font-size: 26/@rem;
      margin-left: 30/@rem;
      color: #666666;
    }

    .icon-and-community {
      margin: 15/@rem 0 0 30/@rem;
      width: 480/@rem;
      height: 36/@rem;

      .key-icon {
        width: auto;
        height: 36/@rem;
        float: left;
      }

      .community {
        margin-left: 20/@rem;
        //margin-top: 5/@rem;
        font-size: 24/@rem;
        color: #999999;
        float: left;
      }
    }
  }
}

.right-box {
  float: right;
  width: 250/@rem;
  height: 180/@rem;

  .data {
    height: 30/@rem;
    width: 200/@rem;
    margin-top: 25/@rem;
    padding-left: 4/@rem;

    .time-icon {
      width: 30/@rem;
      height: 30/@rem;
      float: left;
    }

    .details-date {
      display: block;
      color: #666666;
      font-size: 22/@rem;
      line-height: 22/@rem;
      margin-left: 10/@rem;
      margin-top: 5/@rem;
      float: left;
    }

  }
}

.validity {
  background-color: white;
}

.invalid {
  background-color: #dbdbdb;
  button {
    background-color: #c7c7c7 !important;
  }

}
